import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Column } from '@ant-design/plots';

const DemoColumn = () => {
  const data = [
      { un_name: '江西理工大学中国语言文学', total_fund: 64828 },
      { un_name: '华东交通大学中国语言文学', total_fund: 64137 },
      { un_name: '江西理工大学哲学', total_fund: 60781 },
      { un_name: '东华理工大学中国语言文学', total_fund: 55177 },
      { un_name: '江西理工大学教育学', total_fund: 54679 },
      { un_name: '南昌大学哲学', total_fund: 54435 },
      { un_name: '华东交通大学教育学', total_fund: 54279 },
      { un_name: '东华理工大学哲学', total_fund: 54005 },
      { un_name: '南昌航空大学中国语言文学', total_fund: 53472 },
      { un_name: '东华理工大学教育学', total_fund: 53101 }
    ]
  ;
  const config = {
    data,
    xField: 'un_name',
    yField: 'total_fund',
    xAxis: {
      label: {
        autoHide: true,
        autoRotate: false,
      },
    },
    label: {
      // 可手动配置 label 数据标签位置
      position: 'middle',
    },
    meta: {
      total_fund: {
        alias: '经费',
      },
    },
  };
  return <Column {...config} />;
};

export default DemoColumn
